<h3>Form Validation
   <small>Native AngularJS input validation</small>
</h3>
<!-- START row-->
<div ng-controller="FormValidationController as form" class="container-fluid">
   <div class="row">
      <div class="col-md-12">
         <form name="form.formValidate" ng-submit="form.submitForm()" novalidate="" class="form-validate form-horizontal">
            <!-- START panel-->
            <div class="panel panel-default">
               <div class="panel-body">
                  <fieldset class="b0">
                     <legend>Basics</legend>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Required Text</label>
                        <div class="col-sm-6">
                           <input type="text" name="sometext" required="" ng-model="sometext" class="form-control" />
                           <span ng-show="form.validateInput('sometext', 'required')" class="text-danger">This field is required</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">required</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-6">
                           <input type="email" placeholder="mail@example.com" name="email" required="" ng-model="email" class="form-control" />
                           <span ng-show="form.validateInput('email', 'required')" class="text-danger">This field is required</span>
                           <span ng-show="form.validateInput('email', 'email')" class="text-danger">This field must be a valid email address</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">type='email'</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Checkbox &amp; Radio</label>
                        <div class="col-sm-6">
                           <div class="checkbox c-checkbox needsclick">
                              <label class="needsclick">
                                 <input type="checkbox" required="" name="checkbox" ng-model="checkbox" class="needsclick" />
                                 <span class="fa fa-check"></span>Option one</label>
                           </div>
                           <span ng-show="form.validateInput('checkbox', 'required')" class="text-danger">This field is required</span>
                           <div class="radio c-radio">
                              <label>
                                 <input type="radio" required="" name="radio" value="option1" ng-model="radio" />
                                 <span class="fa fa-circle"></span>Option one</label>
                           </div>
                           <div class="radio c-radio">
                              <label>
                                 <input type="radio" required="" name="radio" value="option2" ng-model="radio" />
                                 <span class="fa fa-circle"></span>Option two checked</label>
                           </div>
                           <span ng-show="form.validateInput('radio', 'required')" class="text-danger">This field is required</span>
                        </div>
                        <div class="col-sm-4"></div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Select</label>
                        <div class="col-sm-6">
                           <select name="select" required="" ng-model="select" class="form-control">
                              <option value="">Nothing</option>
                              <option value="1">Option 1</option>
                              <option value="2">Option 2</option>
                              <option value="3">Option 3</option>
                              <option value="4">Option 4</option>
                           </select>
                           <span ng-show="form.validateInput('select', 'required')" class="text-danger">This field is required</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">type='number'</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Number</label>
                        <div class="col-sm-6">
                           <input type="number" name="number" required="" ng-model="number" class="form-control" />
                           <span ng-show="form.validateInput('number', 'number')" class="text-danger">This field must be a valid number</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">type='number'</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Digits</label>
                        <div class="col-sm-6">
                           <input type="text" name="digits" required="" ng-pattern="/^[0-9]+$/" ng-model="digits" class="form-control" />
                           <span ng-show="form.validateInput('digits', 'pattern')" class="text-danger">This field must contain only digits</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ng-pattern="/^[0-9]+$/"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Alphanum</label>
                        <div class="col-sm-6">
                           <input type="text" name="alphanum" required="" ng-pattern="/^[a-zA-Z]+$/" ng-model="alphanum" class="form-control" />
                           <span ng-show="form.validateInput('alphanum', 'pattern')" class="text-danger">This field must contain only letters</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ng-pattern="/^[a-zA-Z]+$/"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset class="bb0">
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Url</label>
                        <div class="col-sm-6">
                           <input type="url" name="url" required="" ng-model="url" placeholder="protocol://" class="form-control" />
                           <span ng-show="form.validateInput('url', 'url')" class="text-danger">This field must be a valid url</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">type='url'</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset class="b0">
                     <legend>Lengths</legend>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Min</label>
                        <div class="col-sm-6">
                           <input type="text" name="min" required="" ng-model="minvalue" ui-validate="'$value &gt;= 6'" class="form-control" />
                           <span ng-show="form.validateInput('min', 'min')" class="text-danger">This field requires minimum value</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ui-validate="'$value &gt;= 6'"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Max</label>
                        <div class="col-sm-6">
                           <input type="text" name="max" required="" ng-model="maxvalue" ui-validate="'$value &lt;= 6'" class="form-control" />
                           <span ng-show="form.validateInput('max', 'max')" class="text-danger">This field requires maximum value</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ui-validate="'$value &lt;= 6'"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Minlength</label>
                        <div class="col-sm-6">
                           <input type="text" name="minlength" required="" ng-model="minlen" ng-minlength="6" class="form-control" />
                           <span ng-show="form.validateInput('minlength', 'minlength')" class="text-danger">This field requires a min length</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ng-minlength="6"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Maxlength</label>
                        <div class="col-sm-6">
                           <input type="text" name="maxlength" required="" ng-model="maxlen" ng-maxlength="10" class="form-control" />
                           <span ng-show="form.validateInput('maxlength', 'maxlength')" class="text-danger">This field requires a max length</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ng-maxlength="10"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Min words</label>
                        <div class="col-sm-6">
                           <input type="text" name="minwords" required="" ui-validate="'form.words($value) &gt;= 6'" ng-model="minwords" class="form-control" />
                           <span ng-show="form.validateInput('minwords', 'validator')" class="text-danger">This field requires a minimum amount of words</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ui-validate="'words($value) &gt;= 6'"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset class="bb0">
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Max words</label>
                        <div class="col-sm-6">
                           <input type="text" name="maxwords" required="" ui-validate="'words($value) &lt;= 6'" ng-model="maxwords" class="form-control" />
                           <span ng-show="form.validateInput('maxwords', 'validator')" class="text-danger">This field requires a maximum amount of words</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ui-validate="'words($value) &lt;= 6'"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset class="b0">
                     <legend>Range</legend>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Length range</label>
                        <div class="col-sm-6">
                           <input type="text" name="length" required="" ng-model="minmaxlen" ng-minlength="6" ng-maxlength="10" class="form-control" />
                           <span ng-show="form.validateInput('length', 'minlength')" class="text-danger">This field requires a min length of 6</span>
                           <span ng-show="form.validateInput('length', 'maxlength')" class="text-danger">This field requires a max length of 10</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ng-minlength="6", ng-maxlength="10"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset class="bb0">
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Range of words</label>
                        <div class="col-sm-6">
                           <input type="text" name="rangewords" required="" ui-validate="'words($value) &gt;= 6 &amp;&amp; words($value) &lt;= 10'" ng-model="rangewords" class="form-control" />
                           <span ng-show="form.validateInput('rangewords', 'validator')" class="text-danger">This field requires a range of words</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ui-validate="'words($value) &gt;= 6 &amp;&amp; words($value) &lt;= 10'"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset class="b0">
                     <legend>Comparison</legend>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Equal to</label>
                        <div class="col-sm-6">
                           <div class="row">
                              <div class="col-xs-6">
                                 <input id="id-source" type="password" ng-model="match1" class="form-control" />
                              </div>
                              <div class="col-xs-6">
                                 <input type="password" name="confirm_match" required="" ng-model="match2" ui-validate="'$value==match1'" ui-validate-watch="'validator.match1'" class="form-control" />
                              </div>
                           </div>
                           <p ng-show="form.validateInput('confirm_match', 'validator')" class="text-danger">Input does Not match</p>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ui-validate="'$value==match1'"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Email BlackList</label>
                        <div class="col-sm-6">
                           <input type="email" placeholder="example: 'some@mail.com'" name="email_bl" required="" ui-validate="{blacklist : 'form.notBlackListed($value)' }" ng-model="email_bl" class="form-control" />
                           <p ng-show="form.validateInput('email_bl', 'blacklist')" class="text-danger">Email found in black list</p>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">ui-validate="{blacklist}"</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset class="b0">
                     <legend>Advanced</legend>
                  </fieldset>
                  <fieldset>
                     <div ng-controller="TimepickerDemoCtrl" class="form-group">
                        <label class="col-sm-2 control-label">Chosen</label>
                        <div class="col-sm-6">
                           <div class="input-group mb">
                              <span class="input-group-addon">@</span>
                              <!-- this uses fixed width to avoid expand outside the group container-->
                              <select chosen="" required="" name="chosen" ng-model="inputg1" width="'300px'" class="chosen-select input-md">
                                 <option value=""></option>
                                 <option value="1">Nulla facilisi. Quisque in sapien et neque sodales facilisis. Proin a porta turpis.</option>
                                 <option value="2">New York Giants</option>
                                 <option value="3">Philadelphia Eagles</option>
                                 <option value="4">Washington Redskins</option>
                              </select>
                           </div>
                           <span ng-show="form.validateInput('chosen', 'required')" class="text-danger">This field is required</span>
                        </div>
                        <div class="col-sm-4"></div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div ng-controller="TimepickerDemoCtrl" class="form-group">
                        <label class="col-sm-2 control-label">Chosen multiple</label>
                        <div class="col-sm-6">
                           <select chosen="" required="" name="chosenmultiple" multiple="multiple" ng-model="chosenmultiple" class="chosen-select form-control">
                              <option value="">
                                 <option>Dallas Cowboys</option>
                                 <option>New York Giants</option>
                                 <option>Philadelphia Eagles</option>
                                 <option>Washington Redskins</option>
                                 <option>Chicago Bears</option>
                                 <option>Detroit Lions</option>
                                 <option>Green Bay Packers</option>
                                 <option>Minnesota Vikings</option>
                                 <option>Atlanta Falcons</option>
                                 <option>Carolina Panthers</option>
                                 <option>New Orleans Saints</option>
                                 <option>Tampa Bay Buccaneers</option>
                                 <option>Arizona Cardinals</option>
                                 <option>St. Louis Rams</option>
                                 <option>San Francisco 49ers</option>
                                 <option>Seattle Seahawks</option>
                                 <option>Buffalo Bills</option>
                                 <option>Miami Dolphins</option>
                                 <option>New England Patriots</option>
                                 <option>New York Jets</option>
                                 <option>Baltimore Ravens</option>
                                 <option>Cincinnati Bengals</option>
                                 <option>Cleveland Browns</option>
                                 <option>Pittsburgh Steelers</option>
                                 <option>Houston Texans</option>
                                 <option>Indianapolis Colts</option>
                                 <option>Jacksonville Jaguars</option>
                                 <option>Tennessee Titans</option>
                                 <option>Denver Broncos</option>
                                 <option>Kansas City Chiefs</option>
                                 <option>Oakland Raiders</option>
                                 <option>San Diego Chargers</option>
                              </option>
                           </select>
                           <span ng-show="form.validateInput('chosenmultiple', 'required')" class="text-danger">This field is required</span>
                        </div>
                        <div class="col-sm-4"></div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div ng-controller="uiSelectController as uisel" class="form-group">
                        <label class="col-sm-2 control-label">uiSelect</label>
                        <div class="col-sm-6">
                           <div class="input-group">
                              <ui-select ng-model="uisel.address.selected" name="uiselect" ng-required="true" theme="bootstrap" ng-disabled="uisel.disabled" reset-search-input="false">
                                 <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
                                 <ui-select-choices repeat="address in uisel.addresses | filter: $select.search track by $index" refresh="uisel.refreshAddresses($select.search)" refresh-delay="0">
                                    <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
                                 </ui-select-choices>
                              </ui-select>
                              <span class="input-group-btn">
                                 <button type="button" ng-click="uisel.address.selected = undefined" class="btn btn-default">
                                    <small>
                                       <em class="fa fa-trash text-muted icon-lg"></em>
                                    </small>
                                 </button>
                              </span>
                           </div>
                           <span ng-show="form.validateInput('uiselect', 'required')" class="text-danger">This field is required</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">Value: {{uisel.address.selected.formatted_address}}</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div ng-controller="DatepickerDemoCtrl as dpick" class="form-group">
                        <label class="col-sm-2 control-label">Datepicker</label>
                        <div class="col-sm-6">
                           <p class="input-group">
                              <input type="text" name="date" required="" uib-datepicker-popup="{{dpick.format}}" ng-model="dpick.date" is-open="dpick.opened" min-date="dpick.minDate" max-date="'2019-12-22'" uib-datepicker-options="dpick.dateOptions" date-disabled="dpick.disabled(date, mode)"
                              close-text="Close" class="form-control" />
                              <span class="input-group-btn">
                                 <button type="button" ng-click="dpick.open($event)" class="btn btn-default">
                                    <em class="fa fa-calendar"></em>
                                 </button>
                              </span>
                           </p>
                           <span ng-show="form.validateInput('date', 'required')" class="text-danger">This field is required</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">Value: {{dpick.date}}</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div ng-controller="TimepickerDemoCtrl as tpick" class="form-group">
                        <label class="col-sm-2 control-label">Timepicker</label>
                        <div class="col-sm-6">
                           <uib-timepicker name="timepickr" required="" ng-model="tpick.mytime" ng-change="tpick.changed()" hour-step="tpick.hstep" minute-step="tpick.mstep" show-meridian="tpick.ismeridian"></uib-timepicker>
                           <span ng-show="form.validateInput('timepickr', 'required')" class="text-danger">This field is invalid</span>
                        </div>
                        <div class="col-sm-4">
                           <small class="text-muted">Time is: {{tpick.mytime | date:'shortTime' }}</small>
                        </div>
                     </div>
                  </fieldset>
                  <fieldset>
                     <div class="form-group">
                        <label class="col-sm-2 control-label">Tags input</label>
                        <div class="col-sm-6">
                           <input type="text" required="" name="tagsinput" tagsinput="tagsinput" ng-model="tagsinput" class="form-control" />
                           <span ng-show="form.validateInput('tagsinput', 'required')" class="text-danger">This field is required</span>
                        </div>
                        <div class="col-sm-4">
                           <span class="help-block">Values: {{tagsinput}}</span>
                        </div>
                     </div>
                  </fieldset>
               </div>
               <div class="panel-footer text-center">
                  <button type="submit" class="btn btn-info">Run validation</button>
               </div>
            </div>
            <!-- END panel-->
         </form>
      </div>
   </div>
   <!-- END row-->
   <!-- START row-->
   <div class="row">
      <div class="col-lg-6">
         <form name="registerForm" novalidate="" class="form-validate">
            <!-- START panel-->
            <div class="panel panel-default">
               <div class="panel-heading">
                  <div class="panel-title">Form Register</div>
               </div>
               <div class="panel-body">
                  <div class="form-group">
                     <label class="control-label">Email Address *</label>
                     <input type="email" placeholder="mail@example.com" name="email" required="" ng-model="register.email" class="form-control" />
                     <span ng-show="registerForm.email.$dirty &amp;&amp; registerForm.email.$error.required" class="text-danger">This field is required</span>
                     <span ng-show="registerForm.email.$dirty &amp;&amp; registerForm.email.$error.email" class="text-danger">This field must be a valid email address</span>
                  </div>
                  <div class="form-group">
                     <label class="control-label">Password *</label>
                     <input id="id-password" type="password" name="password1" ng-model="register.password1" ng-pattern="/^[a-zA-Z0-9]{6,10}$/" class="form-control" />
                     <span ng-show="registerForm.password1.$dirty &amp;&amp; registerForm.password1.$error.pattern" class="text-danger">Input should match 'a-zA-Z0-9' and 6-10 length</span>
                  </div>
                  <div class="form-group">
                     <label class="control-label">Confirm Password *</label>
                     <input type="password" name="confirm_match" required="" ng-model="register.password2" ui-validate="'$value==register.password1'" ui-validate-watch="'register.password1'" class="form-control" />
                     <span ng-show="registerForm.confirm_match.$dirty &amp;&amp; registerForm.confirm_match.$error.validator" class="text-danger">Password does Not match</span>
                  </div>
                  <div class="required">* Required fields</div>
               </div>
               <div class="panel-footer">
                  <div class="clearfix">
                     <div class="pull-left">
                        <div class="checkbox c-checkbox">
                           <label>
                              <input type="checkbox" name="agreements" required="" ng-model="register.agreements" />
                              <span class="fa fa-check"></span>I agree with the <a href="#">terms</a>
                           </label>
                        </div>
                        <span ng-show="registerForm.agreements.$dirty &amp;&amp; registerForm.agreements.$error.required" class="text-danger">Please read and agree the terms</span>
                     </div>
                     <div class="pull-right">
                        <button type="submit" class="btn btn-primary">Register</button>
                     </div>
                  </div>
               </div>
            </div>
            <!-- END panel-->
         </form>
      </div>
      <div class="col-lg-6">
         <form name="loginForm" novalidate="" class="form-validate">
            <!-- START panel-->
            <div class="panel panel-default">
               <div class="panel-heading">
                  <div class="panel-title">Form Login</div>
               </div>
               <div class="panel-body">
                  <div class="form-group">
                     <label class="control-label">Email Address *</label>
                     <input type="email" placeholder="mail@example.com" name="email" required="" ng-model="login.email" class="form-control" />
                     <span ng-show="loginForm.email.$dirty &amp;&amp; loginForm.email.$error.required" class="text-danger">This field is required</span>
                     <span ng-show="loginForm.email.$dirty &amp;&amp; loginForm.email.$error.email" class="text-danger">This field must be a valid email address</span>
                  </div>
                  <div class="form-group">
                     <label class="control-label">Password *</label>
                     <input type="password" name="password" required="" ng-model="login.password" class="form-control" />
                     <span ng-show="loginForm.password.$dirty &amp;&amp; loginForm.password.$error.required" class="text-danger">This field is required</span>
                  </div>
                  <div class="required">* Required fields</div>
               </div>
               <div class="panel-footer">
                  <button type="submit" ng-disabled="loginForm.$invalid" class="btn btn-primary">Login</button>
               </div>
            </div>
            <!-- END panel-->
         </form>
      </div>
   </div>
   <!-- END row-->
</div>